<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<jsp:include page="include/base.jsp"/>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>怡天网-体检预约</title>
  <meta name="Keywords" content="怡天体检">
  <meta name="Description" content="怡天体检">
  <link rel="stylesheet" href="${Base}/css/weui.css"/>
  <link rel="stylesheet" href="${Base}/css/jquery-weui.css"/>
  <script language="JavaScript" src="${Base}/js/reserveinst-wq-0328.js"></script>
</head>
<body>
<div class="container" id="container">
  <div class="page" id="reservePage">
    <div class="page__hd">
      <!-- img src="${Base}/images/top_logo.jpg"/ -->
      <!-- h1 class="page__title">在线预约</h1 -->
    </div>
    <div id="toast" style="display: none;">
      <div class="weui-mask_transparent"></div>
      <div class="weui-toast">
        <i class="weui-icon-info-circle weui-icon_toast"></i>
        <p class="weui-toast__content"></p>
      </div>
    </div>
    <div class="page__bd" style="height: 100%;">
      <div class="weui-tab">
        <div class="weui-navbar">
          <div class="weui-navbar__item" onclick="window.location='${Base}/wx/myReserve'">
            我的预约
          </div>
          <div class="weui-navbar__item weui-bar__item_on">
            预约体检
          </div>
        </div>
        <div class="weui-tab__panel">
        </div>
      </div>
    </div>
    <div class="page__bd">
      <div class="weui-cells__title"><h1>团体客户预约</h1></div>
      <div class="weui-cells">
        <form id="reserveForm" method="post" action="${Base}/wx/reserve">
          <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
              <label for="customer" class="weui-label">客户名称</label>
            </div>
            <div class="weui-cell__bd">
              <select id="customer" name="customer" class="weui-select">
                <option value="">请选择客户名称</option>
                <option value="网秦">网秦</option>
              </select>
            </div>
          </div>

          <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
              <label for="city" class="weui-label">城市</label>
            </div>
            <div class="weui-cell__bd">
              <select id="city" name="city" class="weui-select" onchange="fillInst(this.value,'institution','branch','address')">
                <option value="">请选择城市</option>
                <option value="北京">北京</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select weui-cell_select-after">
            <div class="weui-cell__hd">
              <label for="institution" class="weui-label">机构</label>
            </div>
            <div class="weui-cell__bd">
              <select id="institution" name="institution" class="weui-select" onchange="fillBranch(this.value, 'branch','address')">
                <option value="">请选择机构</option>
              </select>
            </div>
          </div>
          <div class="weui-cell weui-cell_select weui-cell_select-after" id="branchContainer">
            <div class="weui-cell__hd">
              <label for="branch" class="weui-label">分院</label>
            </div>
            <div class="weui-cell__bd">
              <select id="branch" name="branch" class="weui-select" onchange="fillAddress(this, 'address')">
                <option value="">请选择分院</option>
              </select>
            </div>
          </div>
          <div class="weui-cell" id="addressContainer">
            <div class="weui-cell__hd">
              <label for="address" class="weui-label">地址</label>
            </div>
            <div class="weui-cell__bd"><textarea class="weui-textarea" id="address" name="address" readonly="readonly" rows="5"></textarea></div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">手机号</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" id="mobile" name="mobile" placeholder="请输入手机号" pattern="1[0-9]{10}"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">姓名</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" name="name" id="name" type="text" placeholder="请输入体检人姓名"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">身份证号</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" name="identity" id="identity" type="text" placeholder="请输入18位身份证号" pattern="[0-9]{18}"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">预约时间</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="text" placeholder="请选择预约日期" id="reserveDate" name="reserveDate"/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">备注</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" name="comments" id="comments" type="text" placeholder=""/>
            </div>
            <div class="weui-cell__ft">
            </div>
          </div>
          <a href="javascript:;" class="weui-btn weui-btn_primary">预&nbsp;&nbsp;约</a>
        </form>
      </div>
    </div>
  </div>
  <div class="page" id="successMsg" style="display:none;">
    <div class="weui-msg">
      <div class="weui-msg__icon-area"><i class="weui-icon-success weui-icon_msg"></i></div>
      <div class="weui-msg__text-area">
        <h2 class="weui-msg__title">操作成功</h2>
        <p class="weui-msg__desc">您的预约请求已成功送达，预约成功会有短信通知发送到您的手机上，敬请查收。</p>
      </div>
      <div class="weui-msg__opr-area">
        <p class="weui-btn-area">
          <a href="javascript:window.location='${Base}/wx/myReserve'" class="weui-btn weui-btn_primary">查看我的预约</a>
          <a href="javascript:history.back();" class="weui-btn weui-btn_default">返回</a>
        </p>
      </div>
      <div class="weui-msg__extra-area">
        <div class="weui-footer">
          <p class="weui-footer__links">
            <a href="javascript:void(0);" class="weui-footer__link"></a>
          </p>
          <p class="weui-footer__text"></p>
        </div>
      </div>
    </div>
  </div>
  <script src="${Base}/js/jquery-2.1.4.js"></script>
  <script src="${Base}/js/form.js"></script>
  <script language="javascript" src="${Base}/js/jquery-weui.js"></script>
  <script language="javascript">
    $(function(){
      var nTime = new Date();
      nTime.setDate(nTime.getDate()+6);
      var y= nTime.getFullYear();
      var m= (nTime.getMonth()+1);
      var d= nTime.getDate();
      m = (m < 10?"0" + m : m);
      d = (d < 10?"0" + d : d);
      var minDate = y + "-" + m + "-" + d;
      if(minDate <= "2017-02-07"){
        minDate = "2017-02-08";
      }
      $("#reserveDate").val(minDate);
      $("#reserveDate").calendar({
        value: [minDate],
        minDate: minDate
      });
      var $toast = $('#toast');
      var showToast=function(content) {
        $(".weui-toast__content").html(content);
        if ($toast.css('display') != 'none') return;
        $toast.fadeIn(100);
        setTimeout(function () {
          $toast.fadeOut(100);
        }, 1000)
      };
      $(".weui-btn_primary").on("click", function() {
        if ($("#city").val() == "") {
          showToast("请选择城市");
          return false;
        }
        if ($("#institution").val() == "") {
          showToast("请选择机构");
          return false;
        }
        if ($("#branch").children().length>1 && $("#branch").val() == "") {
          showToast("请选择分院");
          return false;
        }
        if ($("#mobile").val() == ""){
          showToast("请输入手机号")
          return  false;
        }
        if ($("#name").val() == ""){
          showToast("请输入姓名")
          return  false;
        }
        if ($("#identity").val() == ""){
          showToast("请输入身份证号")
          return  false;
        }
        if ($("#reserveDate").val() == ""){
          showToast("请选择预约日期")
          return  false;
        }
        $('#reserveForm').ajaxSubmit(function (data) {
          if (data.errno == "1") {
            showToast(data.errdesc);
          } else {
            window.location ="${Base}/wx/success";
            return;
            reservePage = $("#reservePage");
            reservePage.hide();
            successMsg = $("#successMsg");
            if (successMsg.css('display') != 'none') return;
            successMsg.fadeIn(100);
          }
        });

      });
    });
  </script>
</body>
</html>
